<template>
	<view class="user">
		<!-- 头部 -->
		<view class="user-wrap">
			<view class="setting iconfont icon31shezhi"></view>
			<view class="info">
					<image class="avatar" mode="aspectFill" :src="userInfo.avatarUrl"></image>
					<button v-if="canIGetUserProfile" class='nickname' type='primary' @click="bindGetUserInfo"> {{userInfo.nickName}}</button>
					<button v-else class='nickname' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="bindGetUserInfo"> {{userInfo.nickName}} </button>
			</view>
		</view>

		<!--  -->
		<view class="order-status">
			<view class="status-wrap">
			</view>
		</view>


		<!-- 用户功能 -->
		<view class="com-item">
			<view class="com-wrap">
				<!-- 分享给好友 -->
				<button class="cell" open-type="share">
					<view class="cell-left">
						<!-- <image class="cell-icon" :src="item.icon" mode="aspectFill"></image> -->
						<i class="iconfont icon-fenxiang"></i>
						<view class="cell-text">分享给好友</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</button>
				<!-- 在线客服 -->
				<button class="cell" open-type="contact">
					<view class="cell-left">
						<!-- <image class="cell-icon" :src="item.icon" mode="aspectFill"></image> -->
						<i class="iconfont icon-kefu"></i>
						<view class="cell-text">客服中心</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</button>
				<!-- 意见反馈 -->
				<button class="cell" open-type="feedback">
					<view class="cell-left">
						<span class="iconfont icon-xiugaioryijian" style="color: #d71345;"></span>
						<view class="cell-text">意见反馈</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</button>
				<button class="cell" @click="clear">
					<view class="cell-left">
						<span class="iconfont icon-shanchu"></span>
						<view class="cell-text">清除缓存</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</button>
				<button class="cell" @click="toAbout">
					<view class="cell-left">
						<span class="iconfont icon-guanyuwomen"></span>
						<view class="cell-text">关于我们</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</button>
				
			</view>
		</view>
		<!-- 用户服务 -->
		<view class="com-item">
			<view class="com-wrap">
			</view>
		</view>
	</view>
</template>

<script>
	import comNav from './components/com-nav.vue'
	export default {
		components: {
			comNav
		},
		data() {
			return {
				userInfo: {
					avatarUrl: '/static/images/user/avatar.jpg',
					nickName: '请登录'
				},
				currentIndex: 0,
				sessionKey: '',
				openId: '',
				nickName: null,
				avatarUrl: null,
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				canIGetUserProfile: false,
			};
		},
		onLoad() {
			var _this = this;
			//console.log(uni.getUserProfile);
			if (uni.getUserProfile) {
				this.canIGetUserProfile = true;
			}
			//判断若是版本不支持新版则采用旧版登录方式
			//查看是否授权
			if (!this.canIGetUserProfile) {
				uni.getSetting({
					success: function(res) {
						if (res.authSetting['scope.userInfo']) {
							uni.getUserInfo({
								provider: 'weixin',
								success: function(res) {
									_this.userInfo = res.userInfo;
									try {
										_this.login();
									} catch (e) {}
								},
								fail(res) {}
							});
						} else {
							// 用户没有授权
							console.log('用户还没有授权');
						}
					}
				});
			}
		},

		methods: {
			//登录授权
			bindGetUserInfo(e) {
				var _this = this;
				if (this.canIGetUserProfile) {
					//新版登录方式
					uni.getUserProfile({
						desc: '登录',
						success: (res) => {
							//console.log(res);
							console.log(res,'用户信息');
							_this.userInfo = res.userInfo;
							try {
								_this.login();
							} catch (e) {}
						},
						fail: (res) => {
							console.log(res)
						}
					});
				} else {
					//旧版登录方式
					if (e.detail.userInfo) {
						//用户按了允许授权按钮
						//console.log('手动');
						//console.log(e.detail.userInfo);
						_this.userInfo = e.detail.userInfo;
						try {
							_this.login();
						} catch (e) {}
					} else {
						console.log('用户拒绝了授权');
						//用户按了拒绝按钮
					}
				}
			},
			//登录
			login() {
				let _this = this;
				// 获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(res) {
						//console.log(res);
						if (res.code) {
							let code = res.code;
							//将用户登录code传递到后台置换用户SessionKey、OpenId等信息
							//...写用code置换SessionKey、OpenId的接口
							//置换成功调用登录方法_this.updateUserInfo();
						} else {
							uni.showToast({
								title: '登录失败！',
								duration: 2000
							});
							console.log('登录失败！' + res.errMsg)
						}
					},
				});
			},
			clear(){
				uni.showToast({
				title: '清除成功',
				duration: 1000
				});
			},
			toAbout(){
				uni.navigateTo({
					url: "/pages/component/aboutUs"
				})
			},
			//向后台更新信息
			updateUserInfo() {
				uni.showLoading({
					title: '登录中...'
				});
				let _this = this;
				var params = {
					openId: _this.openId,
					nickName: _this.userInfo.nickName,
					avatarUrl: _this.userInfo.avatarUrl,
					gender: _this.userInfo.gender,
					city: _this.userInfo.city,
					province: _this.userInfo.province,
					country: _this.userInfo.country,
					unionId: '',
				}
				//console.log('登录');
				//...后台登录的接口
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.btn-hover {
		background: #f2f2f2 !important;
	}

	.user {
		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50vw;
			padding: 30rpx;
			z-index: 9;
			border-radius: 0 0 20% 20%;
			background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
			background-size: cover;

			.setting {
				color: #fff;
				position: absolute;
				top: 60rpx;
				left: 60rpx;
				font-size: 50rpx;
			}

			.info {
				position: absolute;
				text-align: center;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}

				.nickname {
					color: #fff;
					font-size: 28rpx;
					background-color: #8A2BE2;
					width: 200rpx;
					border: none !important;
					outline: none !important;
					background-color: rgba(200, 49, 220, 0)
				}
			}
		}

		.order-status {
			padding: 0 20rpx;
			margin-top: -10vw;

			.status-wrap {
				border-radius: 25rpx;
				overflow: hidden;

				.status-list {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background: #fff;
					padding-top: 30rpx;
					padding-bottom: 30rpx;

					.status-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.item-icon {
							line-height: 1;
							font-size: 65rpx;
							color: #bbb;
						}

						.item-text {
							font-size: 28rpx;
							color: #666;
							margin-top: 5rpx;
						}
					}
				}
			}
		}

		.com-item {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;

			.com-wrap {
				border-radius: 25rpx;
				overflow: hidden;
			}
		}

		.cell {
			height: 96rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border: none;
			border-bottom: 1px solid #f8f8f8;

			&:active {
				background: #f2f2f2;
			}

			&:last-child {
				border-bottom: none !important;
			}

			.cell-left {
				display: flex;
				align-items: center;

				.cell-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.cell-text {
					color: #666;
					font-size: 32rpx;
					margin-left: 20rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #999;
			}
		}
	}

	.icon-fenxiang {
		color: #007AFF !important;
		font-size: 36rpx;
	}

	.icon-kefu {
		color: #ff1d6c !important;
		font-size: 36rpx;
	}
	button::after{
		  border: 0;
	}
</style>
